# ClientOnly

이 컴포넌트는 클라이언트 환경에서만 children을 렌더링하며, 서버에서는 fallback을 렌더링합니다. 필요에 따라 적절한 fallback을 설정하여 사용자 경험을 향상할 수 있습니다.

`ClientOnly`는 실행 환경을 감지하기 위해 내부적으로 [`useIsClient`](/docs/react/useIsClient) 훅을 사용하여 구현되었습니다.

```tsx /ClientOnly/
import { ClientOnly } from '@suspensive/react'

const Example = () => (
  <ClientOnly fallback={<>로딩 중...</>}>
    <div>클라이언트 환경에서만 렌더링 됩니다.</div>
  </ClientOnly>
)
```

## ClientOnly.with

`ClientOnly.with`는 ClientOnly를 사용하여 컴포넌트를 래핑하는 HOC입니다.
`ClientOnly.with`를 사용하면 컴포넌트를 쉽게 래핑할 수 있습니다.

```tsx /ClientOnly.with/
import { ClientOnly } from '@suspensive/react'

const Example = ClientOnly.with({ fallback: <>server</> }, () => {
  return <>client</>
})
```
